<template>
  <div style="height: calc(20vh - 120px)">
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      :header-cell-style="{ textAlign: 'center' }"
      row-key="title"
      default-expand-all
    >
      <el-table-column prop="title" label="菜单名称" sortable />
      <el-table-column prop="icon" label="图标" align="center">
        <template #default="scope">
          <el-icon> <component :is="scope.row.icon" /></el-icon>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" sortable />
      <el-table-column prop="status" label="创建时间" />
      <el-table-column prop="status" label="操作" fixed="right" width="190">
        <template #default="scope">
          <el-button link icon="EditPen" type="primary" size="small">
            修改
          </el-button>
          <el-button link icon="Plus" type="primary" size="small">
            新增
          </el-button>
          <el-button link icon="Delete" type="primary" size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { carte } from "@/api/system/menu";

export default {
  data() {
    return {
      tableData: [],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      carte().then((res) => {
        console.log("菜单栏", res);
        this.tableData = res.data;
      });
    },
  },
};
</script>
<style></style>
